<!--
 * @Author: sundl
 * @Date: 2021-04-08 16:13:29
 * @project: 天津YQ平台
-->
<template>
  <el-row class="wrap">
    <ModuleCard>
      <template v-slot:header>研判意见</template>
      <el-form label-width="87px">
        <dg-row>
          <dg-col :span="6">
            <el-form-item label="研判时间：">
              <qb-showlable :values="judgeInfo.fksj" type="DATE" format="yyyy-MM-dd HH:mm:ss"></qb-showlable>
            </el-form-item>
          </dg-col>
          <dg-col :span="6">
            <el-form-item label="研判人：">
              <qb-showlable :values="judgeInfo.fkrxm"></qb-showlable>
            </el-form-item>
          </dg-col>
          <dg-col :span="6">
            <el-form-item label="研判单位：">
              <div v-translate="{ code: BM_DEPT, value: judgeInfo.fkdwdm }"></div>
            </el-form-item>
          </dg-col>
          <dg-col :span="6">
            <el-form-item label="联系电话：">
              <qb-showlable :values="judgeInfo.fkrdh"></qb-showlable>
            </el-form-item>
          </dg-col>
        </dg-row>
        <dg-row style="width: 50%;">
          <el-form-item label="附件：">
            <enclosure :files="judgeInfo.fileHolderList"></enclosure>
          </el-form-item>
        </dg-row>
      </el-form>
      <dg-row type="flex">
        <dg-col :height="'262px'" class="wrap-col" v-for="item in moduleList" :key="item.key">
          <div class="info-card">
            <div :class="['info-card__header', item.color + '-border']">{{ item.label }}</div>
            <div class="info-card__content">
              <div class="info-card__content--text">{{ judgeInfo[item.key] | filterText }}</div>

              <div class="info-card__content--more">
                <el-popover v-if="judgeInfo[item.key]" popper-class="" placement="right" trigger="hover">
                  <span slot="reference" class="">更多 ></span>
                  <p class="">
                    {{ judgeInfo[item.key] }}
                  </p>
                </el-popover>
              </div>
            </div>
          </div>
        </dg-col>
      </dg-row>
    </ModuleCard>
  </el-row>
</template>

<script>
import ModuleCard from '@/components/layout/module-card';
import Enclosure from '@/components/layout/enclosure';
import { fetchFeedbackList } from '@/api/common';
import { BM_DEPT } from '@/common/codeDic';

export default {
  name: 'JudgeOpinions',
  components: {
    ModuleCard,
    Enclosure
  },
  data() {
    return {
      BM_DEPT,
      judgeInfo: {},
      moduleList: [
        {
          label: '近期动向',
          key: 'jqdx',
          color: 'blue'
        },
        {
          label: '研判意见',
          key: 'ypyj',
          color: 'green'
        },
        {
          label: '对策意见',
          key: 'dcyj',
          color: 'orange'
        },
        {
          label: '备注',
          key: 'fkbz',
          color: 'red'
        }
      ]
    };
  },
  computed: {
    flowId() {
      return this.$route.params.id || '';
    }
  },
  methods: {
    fetchJudgeInfo() {
      fetchFeedbackList({
        page: 0,
        size: 1,
        sort: JSON.stringify({ fksj: 'desc' }),
        searchCondition: JSON.stringify([
          { name: 'query_fj', value: 'true', op: '=' },
          { name: 'query_qx', value: 'ALL', op: '=' },
          { name: 'query_zlxx', value: 'true', op: '=' },
          { name: 'query_zljsxx', value: 'true', op: '=' },
          { name: 'flowid', value: this.flowId, op: '=' },
          { name: 'fklx', value: '2', op: '=' }
        ])
      }).then(res => {
        if (Array.isArray(res.data.content) && res.data.content.length) {
          this.judgeInfo = res.data.content[0];
        }
      });
    }
  },
  created() {
    this.fetchJudgeInfo();
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  &-col {
    margin: 0 0.5rem;
    &:first-child {
      margin-left: 0;
      padding-left: 3px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .info-card {
    position: relative;
    $info-height: 16.38rem;
    $info-header-height: 58px;

    box-sizing: border-box;

    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
    border-radius: 2px;
    &__header {
      display: flex;
      align-items: center;
      padding-left: 1.5rem;
      height: 40px;
      box-sizing: border-box;
      border-left: 3px solid rgba(248, 192, 40, 1);
      border-radius: 2px;
      font-size: 1rem;
      font-weight: bold;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.85);
    }
    &__content {
      height: 172px;
      padding: 1rem 1.5rem 2rem;
      &--text {
        position: relative;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 6;
        font-size: 0.88rem;
        box-sizing: border-box;
        line-height: 28px;
        color: black;
        opacity: 0.85;
      }
      &--more {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 0.88rem;
        color: #4090ff;
      }
    }

    .blue-border {
      border-left-color: rgba(36, 196, 249, 1);
    }
    .green-border {
      border-left-color: rgba(81, 208, 134, 1);
    }
    .orange-border {
      border-left-color: rgba(248, 192, 40, 1);
    }
    .red-border {
      border-left-color: rgba(248, 62, 62, 1);
    }
  }
}
</style>
